<template>
    <!-- header -->
    <div class="header">
        <div class="top-bar">
            <div class="container">
                <div class="top-bar-main clear">
                    <div class="top-bar-left">
                        客服热线：
                        <span class="phone">0755-36936665</span>
                    </div>
                    <div class="top-bar-right">
                        <span class="top-item" v-if="username!=''">{{username}}，欢迎您！进入
                            <router-link :to="{path:'/PersonalCenter'}" class="top-bar-person">个人中心</router-link>
                            <a class="top-bar-out" @click="loginOut">退出</a>
                        </span>
                        <span class="top-item" v-else>
                            <router-link :to="{path:'/Login'}">登录</router-link>
                        </span>
                        <span class="line">|</span>
                        <span class="top-item">
                            <router-link :to="{path:'/Register'}">注册</router-link>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    props: {
        username: {
            default: ''
        }
    },
    data() {
        return {
        }
    },
    methods: {
        loginOut() {
            $.get('http://192.168.0.155:155/api/Main/LogOut', (res) => {
                this.$emit('LoginOut',this.username);
                sessionStorage.removeItem("userName"); 
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*  header */


/*  header */

.top-bar {
    background: #f5f5f5;
}

.top-bar-main {
    font-size: 13px;
}

.top-bar-left {
    float: left;
    height: 40px;
    line-height: 40px;
}

.top-bar-left .phone {
    color: #fab379;
}

.top-bar-person {
    color: #34a8e0;
}

.top-bar-out {
    margin-left: 15px;
}

.top-bar-right {
    float: right;
    height: 40px;
    line-height: 40px;
}

.top-bar-right .top-item {
    float: left;
}

.line {
    margin: 0 10px;
    float: left;
}
</style>
